<template>
	<div class="nav-menu">
		<div class="logo">
			<img src="@/assets/img/logo.svg" alt="" class="img" />
			<span class="title" v-if="!isMenuFold">Vue3+TS</span>
		</div>
		<el-menu
			:default-active="defaultValue"
			class="el-menu-vertical-demo"
			background-color="#0c2135"
			text-color="#b7bdc3"
			active-text-color="#0a60bd"
			:unique-opened="true"
			:collapse="isMenuFold"
		>
			<template v-for="item in userMenus" :key="item.id">
				<!-- 二级菜单 -->
				<template v-if="item.type === 1">
					<!-- 二级菜单可以展开的标题 -->
					<el-sub-menu :index="item.id + ''">
						<template #title>
							<el-icon><Monitor /></el-icon>
							<span>{{ item.name }}</span>
						</template>
						<!-- 遍历里面的item -->
						<template v-for="subItem in item.children" :key="subItem.id">
							<el-menu-item :index="subItem.id + ''" @click="handleMenuItemClick(subItem)">
								<template #title>
									<el-icon><Sunny /></el-icon>
									<span>{{ subItem.name }}</span>
								</template>
							</el-menu-item>
						</template>
					</el-sub-menu>
				</template>
				<!-- 一级菜单 -->
				<template v-else-if="item.type === 2">
					<el-menu-item :index="item.id + ''">
						<!-- 当有icon时，添加icon图标 -->
						<template #title>
							<span>{{ item.name }}</span>
						</template>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script lang="ts">
	import { defineComponent, computed,ref } from 'vue'
	import { useStore } from 'vuex'
  import {useRoute, useRouter } from 'vue-router'
  import {pathMap} from '@/utils/map-menus'
	export default defineComponent({
		props: ['isMenuFold'],
		setup() {
			const store = useStore()
      const router = useRouter()
      const route = useRoute()
      const currentPath = route.path
			const userMenus = computed(() => store.state.loginModule.userMenus)

      const menu = pathMap(userMenus.value,currentPath)
      const defaultValue = ref( menu.id + '')
      const handleMenuItemClick = (item:any)=>{
        router.push({
          path:item.url??'/not-found'
        })
      }
			return {
				userMenus,
        defaultValue,
        handleMenuItemClick
			}
		}
	})
</script>

<style lang="less" scoped>
	.nav-menu {
		height: 100%;
		background-color: #001529;

		.logo {
			display: flex;
			height: 28px;
			padding: 12px 10px 8px 10px;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.img {
				height: 100%;
				margin: 0 10px;
			}

			.title {
				font-size: 16px;
				font-weight: 700;
				color: white;
			}
		}

		.el-menu {
			border-right: none;
		}

		// 目录
		.el-sub-menu {
			background-color: #001529 !important;
			// 二级菜单 ( 默认背景 )
			.el-menu-item {
				padding-left: 50px !important;
				background-color: #0c2135 !important;
			}
		}

		::v-deep .el-submenu__title {
			background-color: #001529 !important;
		}

		// hover 高亮
		.el-menu-item:hover {
			color: #fff !important; // 菜单
		}

		.el-menu-item.is-active {
			color: #fff !important;
			background-color: #0a60bd !important;
		}
	}

	.el-menu-vertical:not(.el-menu--collapse) {
		width: 100%;
		height: calc(100% - 48px);
	}
</style>